<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    初识Vue:
    1.想让Vue工作，就必须创建一个实例，且要传入一个配置对象；
    2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称之为【Vue模板】；
    4.vue实例和容器是一一对应的：
    5.真实开发中只有一个vue实例，并配合着组件一起使用
    6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中所有属性；
    7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

    注意区分：js表达式和js代码（语句）
        1.表达式：一个表达式会产生一个值。可以放在任何一个需要值得地方
            (1) a
            (2) a+b
            (3) demo(1)
            (4) a===y?'a':'b'
        2.js代码
            (1) if(){}
            (2) for(){}
-->
<!-- 准备一个容器 -->
<div id="root">
    <h1>Hello {{name}}，{{address}} {{Date.now()}}</h1>
</div>
<div id="root2">
    <h1>Hello {{name}}，{{address}}</h1>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时产生产提示

    //Vue实例和容器必须一一对应

    //创建Vue实例
    //const x=new Vue({//const创建必须初始化,不能改变,x没有用到可以删除
    new Vue({
        el: '#root',//用于指定 当前Vue实例为那个容器服务，通常为css选择器字符串
        data: {//data用于存储数据，数据用于el所指定的的容器使用，值先写成一个对象，以后写成函数
            name: 'world',
            address: '辛集'
        }
    })
    new Vue({
        el: '#root2',//用于指定 当前Vue实例为那个容器服务，通常为css选择器字符串
        data: {//data用于存储数据，数据用于el所指定的的容器使用，值先写成一个对象，以后写成函数
            name: 'world',
            address: '廊坊'
        }
    })
</script>
</html>